<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
	  <style>
	  /* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 头部样式 */
.header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
}

/* 主要内容容器样式 */
.container {
    /* 设置左右内边距，为左右侧边栏留出空间 */
    padding-left: 200px; 
    padding-right: 150px;
    /* 清除浮动影响 */
    overflow: hidden; 
}

/* 三栏通用样式 */
.column {
    float: left;
    position: relative;
    padding: 20px;
}

/* 中间栏样式 */
.center {
    /* 中间栏宽度自适应 */
    width: 100%; 
    background-color: #f9f9f9;
}

/* 左侧边栏样式 */
.left {
    width: 200px;
    background-color: #e0e0e0;
    /* 通过负边距将左侧边栏移动到正确位置 */
    margin-left: -100%; 
    /* 使用相对定位调整位置 */
    left: -200px; 
}

/* 右侧边栏样式 */
.right {
    width: 150px;
    background-color: #d0d0d0;
    /* 通过负边距将右侧边栏移动到正确位置 */
    margin-right: -150px; 
}

/* 底部样式 */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    clear: both;
}
	  </style>
</head>

<body>
    <!-- 页面头部 -->
    <header class="header">
        <h1>圣杯布局示例</h1>
    </header>
    <!-- 主要内容容器 -->
    <div class="container">
        <!-- 中间内容区域 -->
        <div class="center column">
            <p>这里是中间栏的内容，宽度会根据浏览器窗口大小自适应变化。在圣杯布局中，中间栏优先渲染，能够让用户更快地看到主要内容。通常情况下，中间栏会放置页面的核心信息，比如文章内容、商品展示等。</p>
        </div>
        <!-- 左侧边栏 -->
        <div class="left column">
            <p>这是左侧边栏，宽度固定。左侧边栏常被用于放置一些辅助性的导航菜单、相关链接或者分类信息，方便用户快速定位到他们想要的内容区域。</p>
        </div>
        <!-- 右侧边栏 -->
        <div class="right column">
            <p>这是右侧边栏，宽度同样固定。右侧边栏可以用来展示广告、推荐内容或者一些额外的提示信息，为用户提供更多有价值的补充内容。</p>
        </div>
    </div>
    <!-- 页面底部 -->
    <footer class="footer">
        <p>版权所有 &copy; 2024</p>
    </footer>
</body>

</html>